﻿<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <div class="card-title">{{ cfg.title }}</div>

                <el-scrollbar class="tbs-search" v-if="tbsSearch"> 
                    <el-button-group v-if="tbsType=='button'">
                        <el-button v-for="item in getTbsSearch()" :key="item.value" :type="item.value==tbsSearchValue?'primary':'default'" @click="tbsSearchValue=item.value">{{item.label}}</el-button>
                    </el-button-group>

                    <el-space v-if="tbsType=='link'" spacer="|" wrap>
                        <el-link v-for="item in getTbsSearch()" :key="item.value" :type="item.value==tbsSearchValue?'primary':'default'" @click="tbsSearchValue=item.value">{{item.label}}</el-link>
                    </el-space>

                    <el-tabs v-if="tbsType=='tab'" v-model="tbsSearchValue">
                        <el-tab-pane
                            v-for="item in getTbsSearch()"
                            :label="item.label"
                            :name="String(item.value)"
                            :key="String(item.value)"
                        ></el-tab-pane>
                    </el-tabs>

                    <el-dropdown v-if="tbsType=='menu'" split-button type="primary"  @command="doMenuItem">
                            {{tbsSearchLabel}}
                        <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="(item,ix) in getTbsSearch()" :key="ix" :command="item">
                                {{item.label}}
                                <el-icon v-if="item.value==tbsSearchValue"><Check /></el-icon>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-scrollbar>

                <my-search-bar :tbname="tbname" v-model="search" v-if="ready">
                    <template #action>
                        <slot
                            v-if="$slots.search_action"
                            name="search_action"
                        ></slot>
                        <template v-for="btn in search_action" :key="btn" >
                            <el-button  :type="btn.type" 
                                v-if="btn.label && checkIf(btn.vif)" 
                                @click="doClick(btn.click)">{{btn.label}}</el-button>
                        </template>
                        
                        <el-button v-if="allowAdd" type="success"  @click="onAdd">新增</el-button>
                        <el-button v-if="allowExport" type="primary"  @click="onExport">导出</el-button>
                    </template>
                </my-search-bar>
            </div>
                
        </template>

        <my-box-grid
            v-model="page.records"
            :column="column"
            :cell="cell"
            @click="onEdit"
        ></my-box-grid>

        <el-empty
            v-if="page.totalCount == 0"
            description="没有符合条件的数据"
        />

        <el-pagination
            layout="prev, pager, next"
            style="padding-top: 10px"
            v-if="page.pageCount > 1"
            background
            v-model:current-page="page.pageIndex"
            v-model:page-size="page.pageSize"
            :total="page.totalCount"
        ></el-pagination>

        <component
            :is="formName"
            ref="frm"
            :tbname="tbname"
            @added="doLoad"
            @deleted="doLoad"
            @updated="doLoad"
        ></component>
        <my-search-dlg
            ref="dlgSearch"
            :tbname="tbname"
            @search="doSearch"
        ></my-search-dlg>

    </el-card>
</template>

<script>

export default {
    name: "MyBoxGridPage2",
    props: {
        tbname: {
            type: String,
            required: true,
        },
        allowAdd: {
            type: Boolean,
            default: true,
        },
        allowSearch: {
            type: Boolean,
            default: true,
        },
        allowEdit: {
            type: Boolean,
            default: true,
        },
        allowBack: {
            type: Boolean,
            default: true,
        },
        allowExport:{
            type: Boolean,
            default: false,
        },
        column: {
            type: Number,
            default: 4,
        },
        pageSize:{
            type:Number,
            default:8
        },
        //默认的搜索条件
        defaultSearch: Object,
        //子记录编辑界面
        formName: {
            type: String,
            default: "my-form-dlg",
        },
        //页面标题
        label: String,
        //如果ID编辑，还是传入整个记录
        editById: {
            type: Boolean,
            default: true,
        },
        tbsType:{
            type:String,
            default:'link' //link | button | tab
        },
        columns:Array,//用于替换dm上定义的列
    },
    data() {
        return {
            ready: false,
            tbsSearch:null,
            tbsSearchValue:"",
            tbsSearchLabel:"分类菜单",
            cfg: {},
            search: {},
            cell:{ title: "Name", value: "", label: "", icon: "" },
            search_action:null,
            page: {
                pageIndex: 1,
                pageCount: 0,
                pageSize: 8,
                totalCount: 0,
                records: [],
            },
        };
    },
    created() {
        this.ready = false;
        this.page.pageSize = this.pageSize;
        if (this.tbname == "") return;
        this.$server.getDM(this.tbname).then((res) => {
            this.cfg = res;
            if(this.columns && Array.isArray(this.columns) && this.columns.length>0){
                this.cfg.columns = [...this.cfg.columns, ...this.columns];
            }
            this.cfg.title = this.label || this.cfg.title;
            this.cell = { ...this.cell, ...res.cell };
            this.search = this.defaultSearch || {};
            this.search_action = res.search_action;
            if(this.cfg.tbsSearch){
                this.tbsSearch = this.cfg.tbsSearch
                let fd = this.cfg.columns.filter((p) => p.code == this.tbsSearch)[0];
                
                if(fd.control=="select" && fd.select && fd.select.cfg && fd.select.cfg.tbname){
                    //取动态options
                    let moduleName = fd.select.cfg.tbname;
                    let valueField = fd.select.cfg.valueField;
                    let labelField = fd.select.cfg.labelField;
                    this.$server.list(moduleName, 1, 1000, fd.select.cfg.search).then((res) => {
                        let lst = [];
                        let records = res.records || res;
                        for (let ix = 0; ix < records.length; ix++) {
                            let record = records[ix];
                            let item = {
                                value: record[valueField],
                                label: record[labelField],
                            };
                            lst.push(item);
                        }
                        fd.options = lst;
                        if(lst.length>0){
                            this.tbsSearchValue = fd.default? String(fd.default): String(lst[0].value);
                        }
                        this.ready = true;
                    });
                }else{
                    this.tbsSearchValue = fd? String(fd.default || "") : "";
                    this.ready = true;
                }
            }else{
                this.ready = true;
            }
            //不用加载数据， searchbar初始化完成以后，会更新search条件， 
            //search 变化的时候，会自动加载数据
            //this.loadData(1);
        });
    },
    methods: {
        doMenuItem(item){
            this.tbsSearchLabel = item.label;
            this.tbsSearchValue=item.value;
        },
        onGoback() {
            this.$router.replace("/main");
        },
        loadData(pageIndex) {
            pageIndex = pageIndex || this.page.pageIndex;
            var pms = { ...this.defaultSearch, ...this.search };
            this.$server
                .list(this.tbname, pageIndex, this.page.pageSize, pms)
                .then((res) => {
                    this.page = res;
                });
        },
        onSearch() {
            this.$refs.dlgSearch.open(this.search);
        },
        onEdit(item) {
            if (this.allowEdit) {
                this.$refs.frm.open(this.editById ? item.ID : item);
            } else {
                this.$refs.frm.view(this.editById ? item.ID : item);
            }
        },
        onAdd() {
            this.$refs.frm.open(0);
        },
        doSearch(search) {
            this.search = { ...search };
            this.loadData(1);
        },
        doLoad() {
            this.loadData(0);
        },
        getCellTitle(item) {
            return this.parseCellValue(item, this.cell.title);
        },
        getCellLabel(item) {
            return this.parseCellValue(item, this.cell.label);
        },
        getCellValue(item) {
            return this.parseCellValue(item, this.cell.value);
        },
        getCellIcon(item) {
            return this.parseCellValue(item, this.cell.icon);
        },
        parseCellValue(item, tag) {
            return this.$server.dm_format(this.cfg.columns, item, tag);
        },
        getTbsSearch(){
            if(this.tbsSearch && this.tbsSearch.length>0){
                let fd = this.cfg.columns.filter((p) => p.code == this.tbsSearch)[0];
                if(fd){
                    if(fd.options){
                        return fd.options;
                    }
                }
            }
            return [];
        },
       
    },
    watch:{
        pageSize(newValue){
            this.page.pageSize = newValue;
        },
        search(newValue,oldValue){
            var js1 = this.__lastSearch || JSON.stringify(oldValue);
            var js2 = JSON.stringify(newValue);
            if(js1!=js2 || this.page.pageIndex!=1){
                this.__lastSearch = js2;
                this.loadData(1);
            }
        },
        tbsSearchValue(val){
            let spm = {};
            spm[this.tbsSearch] = parseInt(val) || val;
            this.search = {...this.search, ...spm};
            let option = this.getTbsSearch().find(x=>String(x.value)==String(val));
            this.tbsSearchLabel = option? option.label:"分类菜单";
        },
        "page.pageIndex":function(){
            this.loadData();
        },
        "page.pageSize":function(){
            this.loadData(1);
        }
    }
};
</script>

<style>
.mlist-cell-icon {
    width: 42px;
    height: 42px;
}

.mlist-cell-icon img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

</style>

<style scoped>
    .tbs-search{
        margin: 0 20px 0 40px;
        flex: 1;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
    }
</style>